<template>
    <div class="wode">
        <div class="header">
         <router-link to="/waimai" tag="span" class="left iconfont icon-Previous">
        </router-link>
                    <span>我的</span>
                    <span></span>
        </div>
        <div class="box">
            <div class="box1">
                <p class="iconfont icon-wode"></p>
                <div class="cen">
                    <h2>登录/注册</h2>
                    <h3>登录后享受更多特权</h3>
                </div>
                <h4>></h4>
            </div>
        </div>
        <div class="banner">
            <dl>
                <dt class='iconfont icon-hongbao'> </dt>
                <dd>红包</dd>
            </dl>
            <dl>
                <dt class='iconfont icon-jinbi1'> </dt>
                <dd>金币</dd>
            </dl>
        </div>
        <div class="di">
            <a href="javascript:;">
                <p class="iconfont icon-dizhi"></p>
                <div>

                    我的地址

                </div>
                <span>></span>
            </a>
        </div>
        <div class="di">
           <a href="javascript:;">
                <p class="iconfont icon-bao"></p>
                <div>
                    金币商城
                </div>
                <span>></span>
            </a>
            <a href="javascript:;">
                <p class="iconfont icon-libao"></p>
                <div>
                    分享拿5元现金
                </div>
                <span>></span>
            </a>
        </div>
        <div class="di">
            <a href="javascript:;">
                <p class="iconfont icon-kefu"></p>
                <div>
                    我的客服
                </div>
                <span>></span>
            </a>
           <a href="javascript:;">
                <p class="iconfont icon-eliaomo"></p>
                <div>
                    下载饿了么APP
                </div>
                <span>></span>
            </a>
        </div>
        <div class="kong"></div>
    </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
.wode {
  background: #cccccc;
}
.header {
  width: 100%;
  .px2rem(height,86);
  background: linear-gradient(90deg, rgb(0, 170, 255), rgb(0, 134, 255));
  display: flex;
  align-items: center;
  justify-content: space-between;
  .px2rem(font-size,37);
  font-weight: bolder;
  color: #ffffff;
  position: sticky;
  top: 0;
  span {
    width: 33%;
    text-align: center;
  }
  .left {
    text-align: left;
    .px2rem(padding-left,20);
  }
}
.box {
  width: 100%;
  display: flex;
  background: linear-gradient(90deg, rgb(0, 170, 255), rgb(0, 134, 255));
  justify-content: center;
  align-items: center;
  .px2rem(height,200);
  color: #ffffff;
  .box1 {
    width: 80%;
    .px2rem(height,100);
    display: flex;
    justify-content: space-between;
    p {
      .px2rem(font-size,50);
      .px2rem(line-height,100);
    }
    .cen {
      width: 80%;
      .px2rem(padding,20);
      h2 {
        .px2rem(font-size,36);
        font-weight: bolder;
      }
      h3 {
        .px2rem(font-size,24);
        .px2rem(padding-top,10);
      }
    }
    h4 {
      .px2rem(font-size,30);
      .px2rem(line-height,100);
    }
  }
}
.banner {
  width: 100%;
  .px2rem(height,150);
  display: flex;
  align-items: center;
  background: #ffffff;
  dl {
    
    text-align: center;
    width: 50%;
    .px2rem(height,150);
    border: 1px solid #cccccc;
    box-sizing: border-box;
    dt {
       .px2rem(margin-top,20);
      .px2rem(font-size,80);
      color: red;
    }
    dd {
      .px2rem(margin-top,20);
      .px2rem(font-size,26);
      font-weight: bolder;
    }
  }
}
.di {
  width: 100%;
  .px2rem(margin-top,10);
  a {
    width: 100%;
    .px2rem(height,100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    p {
      .px2rem(font-size,40);
      .px2rem(padding-left,20);
    }
    div {
      width: 80%;
      .px2rem(font-size,30);
    }
    span {
      .px2rem(padding-right,20);
    }
    .icon-eliaomo,.icon-kefu,.icon-dizhi{
      color: blue;
      font-weight: bolder;
    }
    .icon-libao{
      color: red;
    }
    .icon-bao,{
      color: green;
    }
    
  }
}
.kong {
  width: 100%;
  .px2rem(height,100);
}
</style>
